<template>
	<div style="position: relative;">
		<div class="back">
			<div class="code">
				请输入支付密码
			</div>
			<div class="hos">支付病例复印费用</div>
			<div class="hos">
				<span class="mon">￥</span>
				<span class="money">6000.00</span>
			</div>
			<div class="flex">
				<div class="way">
					支付方式
				</div>
				<div>
					<span class="balance">余额</span>
					<span class="right">></span>
				</div>
			</div>
			<div class="passwordDiv" @click="success">
				<label class="passwordLabel">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</label>
				<input type="password" id="password" name="password" maxlength="6">
			</div>
		</div>
		<div class="cha">×</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
	
			}
		},
		methods: {
			success() {
				uni.navigateTo({
					url: "../../../hospitalizationServices/pages/charge/success"
				})
			}
	
		}
	}
</script>

<style>
	.cha {
		position: absolute;
		top: 10px;
		left: 40px;
		font-size: 18px;
		color: #AAAAAA;
	}

	* {
		margin: 0;
		padding: 0;
	}

	ul {
		list-style: none;

	}

	.passwordLabel li {
		float: left;
		width: 40px;
		height: 40px;
		line-height: 40px;
		border: 1px solid #dedede;
		margin-left: -1px;
	}

	.passwordDiv {
		margin: 10px 0 40px 26px;

	}

	.balance {
		font-size: 15px;
	}

	.right {
		font-size: 15px;
		color: #AAAAAA;
		margin-left: 10px;
	}

	.way {
		color: #AAAAAA;
		font-size: 14px;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #f5f5f5;
		margin-top: 20px;
		padding: 5px 0;
	}

	.money {
		font-size: 30px;
	}

	.mon {
		font-size: 16px;
	}

	.code {
		font-size: 18px;

		text-align: center;
	}

	.hos {
		text-align: center;
		margin-top: 10px;
		font-size: 16px;
	}

	.back {
		background: #fff;
		border-radius: 5px;
		margin: 50px 30px;
		padding: 10px;
	}

	page {
		background: rgb(150, 150, 151);

	}
</style>